<template>
    <!-- 散点图 -->
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '400px', width: '100%'}">
            <div class="chart" ref="chart" :style="{height:'100%',width:'100%'}"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartScatter',
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    text: '男女身高体重分布',
                },
                tooltip: {
                    trigger: 'item', //触发类型,默认数据触发，可选为:'item' | 'axis'
                    showDelay: 0,
                    axisPointer: {
                        type: 'cross', //坐标轴指示器，默认type为line,可选为：'line' | 'cross' | 'shadow' | 'none'(无)
                        lineStyle: {
                            type: 'dashed',
                            width: 1
                        }
                    },
                    formatter: function(params) {
                        console.log(params)
                        if (params.seriesName) {
                            return params.seriesName + ':<br />'
                            + params.value[0] + 'cm'
                            + params.value[1] + 'kg'
                        }
                    }
                },
                legend: {
                    data: ['女性', '男性']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataZoom: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: true
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'value',
                        precision: 2, //文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如2表示保存两位小数。
                        scale: true, //是否脱离0值比例。设置成true后坐标刻度不会包括强制包含零刻度。再爽数值轴的散点图中比较有用
                        name: '身高（cm）',
                        axisLabel: {
                            formatter: '{value}cm'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        precision: 2,
                        scale: true,
                        name: '体重（km）'
                    }
                ],
                series: [
                    {
                        name: '女性',
                        type: 'scatter',
                        data: [
                            [161.2, 51.6],
                            [172.9, 62.5],
                            [153.4, 42],
                            [160, 50],
                            [147.2, 49.8],
                            [168.2, 49.2],
                            [175, 73.2],
                            [157, 47.8],
                            [167.6, 68.8],
                            [159.5, 50.6],
                            [175, 82.5],
                            [166.8, 57.2],
                            [176.5, 87.8],
                            [170.2, 72.8],
                            [174, 54.5],
                            [173, 59.8],
                            [179.9, 67.3],
                            [170.5, 67.8],
                            [162.6, 61.4]
                        ]
                    },
                    {
                        name: '男性',
                        type: 'scatter',
                        data: [
                            [174, 65.6],
                            [164.1, 55.2],
                            [163, 57],
                            [171.5, 61.4],
                            [184.2, 76.8],
                            [174, 86.8],
                            [182, 72],
                            [167, 64.6],
                            [177.8, 74.8],
                            [180.3, 93.2],
                            [180.3, 82.7],
                            [177.8, 79.5],
                            [177.8, 78.6],
                            [177.8, 71.8],
                            [177.8, 72],
                            [177.8, 81.8],
                            [180.3, 83.2]
                        ]
                    }
                ]
            });
        }
    }
}
</script>